import React from 'react';
import styles from './MoreIndex.css';
import { Input,Icon,Spin } from 'antd';
const Search = Input.Search;
import logoImg from '../../assets/logo.png'
import catIcon from '../../assets/catIcon.jpg'
import searchIcon from '../../assets/searchIcon.png'
import arrowRight from '../../assets/arrowRight.png'
import pageRight from '../../assets/pageRight.png'
const  imgVideoPicUrl = "https://image.huanqiushuju.com/"
import {getcookie} from '../../utils/cookies'
import {HOMEPAGE_URL} from '../../utils/constants'
import 'antd/dist/antd.css'
class MoreIndex extends React.Component{
  constructor(props){
    super(props)
    // console.log("------------props",props)
    this.state = {
      getMoreState:null,
      allMoreInfoArr:[],searchText:'',
    arrowArr:[{arrowText:'全部课程',arrowIcon:searchIcon},
      {arrowText:'我要考研',arrowIcon:searchIcon},
    ],
      //分类
      typeList:[{typeName:'全部',typeNameId:1},{typeName:'英语',typeNameId:2},
        {typeName:'政治',typeNameId:3},{typeName:'数学',typeNameId:4},
        {typeName:'专业课',typeNameId:5},],
      clicktypeNameId:-1,
      loading:false,
      pageTextList:[{pageText:1,pageId:1},{pageText:2,pageId:2},
        {pageText:3,pageId:3},],
      clickPageId:-1
    }
  }
  componentWillMount(test){


    let groupId = getcookie("groupId")
    this.setState({getMoreState:true})
    let getMoreState = true
    // console.log("---------groupList------------",groupId)
    this.props.dispatch({type:"moreIndex/getAllMoreInfo",payload:{groupId,getMoreState}})



    // if(groupList != null){
    //   this.props.dispatch({type:"moreIndex/getAllMoreInfo",payload:{groupList}})
    // }else {
    //   if (status == 203) {
    //     window.location.replace(HOMEPAGE_URL + "error")
    //   }
    //   window.location.replace("https://open.weixin.qq.com/connect/qrconnect?appid=wxd7be34e0f2844079&redirect_uri=http%3a%2f%2fv.huanqiushuju.com%2flogins&response_type=code&scope=snsapi_login&state=2#wechat_redirect");
    // }
  }
  componentDidUpdate(){
    let props = this.props.moreIndex
    if (props.getMoreState == true && this.state.getMoreState == true) {
      this.setState({getMoreState:false,typeList:props.typeNameList,allMoreInfoArr:props.getAllMoreInfoRes})
      let getMoreState = false
      this.props.dispatch({type:"moreIndex/resetState",payload:{getMoreState}})
    }
  }

  onSearchInput=()=>{
    const { searchText } = this.state;
    // console.log("searchText",searchText)
    const reg = new RegExp(searchText,"g");
    let allMoreInfoArr = this.props.moreIndex.getAllMoreInfoRes
    // console.log("list",list)
    this.setState({
      filtered: !!searchText,
      searchText:'',
      allMoreInfoArr:allMoreInfoArr.map((record) => {
        const match = record.courseName.match(reg)||record.courseBri.match(reg)
        if (!match) {
          return null;
        }

        return {
          ...record,
        };
      }).filter(record => !!record)
    });
  }


  render(){
    // console.log("-------this.props--render",this.props)
    let allMoreInfoArr = this.props.moreIndex.getAllMoreInfoRes
    return (
      <div className={styles.allContent}>
        <div className={styles.contentFlex}>
          <div className={styles.topHeader}>

            <div className={styles.headerLeft}>
              <img className={styles.logoImg} src={logoImg} alt="logo"/>
              <h3 className={styles.courseHead}>环球云逸课堂</h3>
              <Input
                placeholder="输入搜索内容"
                className={styles.searchInput}
                style={{ width: 200 }}
                onChange={(e)=>{
                  this.setState({searchText:e.target.value})
                }}
                value={this.state.searchText}
                onPressEnter={this.onSearchInput}

              />
              <div className={styles.searchIconBac} onClick={this.onSearchInput}>
                <img className={styles.searchIcon} src={searchIcon} alt="搜索"/>
              </div>
            </div>

            <div className={styles.headerRight}>
              <div>我的课程</div>
              <div>通知</div>
              <img className={styles.avateIcon} src={logoImg} alt="logo"/>
            </div>

          </div>
         <div className={styles.typeHeader}>
          <div className={styles.arrowText}>
            {
              this.state.arrowArr.map((item)=>{
                return <div key={item.arrowText} className={styles.arrowContent}>
                          <div className={styles.arrowRightText}>{item.arrowText}
                          <img className={styles.arrowRight} src={arrowRight} alt=""/></div>

                      </div>
              })
            }

          </div>
          <div className={styles.typeTextBottom}>
            <div className={styles.typeTitle}>分类</div>
            {
              this.state.typeList.map((item)=>{
                return <text key={item.typeNameId}  onClick={()=>{
                  this.setState({clicktypeNameId:item.typeNameId})
                  if (item.typeName == '全部') {
                    this.setState({allMoreInfoArr:this.props.moreIndex.getAllMoreInfoRes})
                  } else {
                    let id = item.typeNameId

                    let newCourseList = this.props.moreIndex.typeNameList.filter((i)=>{
                      return i.typeNameId == id
                    })
                    {/*console.log("---------newCourseList",newCourseList)*/}
                    this.setState({allMoreInfoArr:newCourseList[0].courseList})
                  }

                  {/*this.props.dispatch({type:"moreIndex/sortType",payload:{}})*/}
                }} className={this.state.clicktypeNameId == item.typeNameId?styles.typeNametextCli:styles.typeNametext}>{item.typeName}</text>
              })
            }
          </div>

         </div>

          <div className={styles.courseContent}>
            <Spin spinning={this.state.loading}>
              <div className={styles.contentMar}>


                <div className={styles.courseShowContent}>
                  {
                    this.state.allMoreInfoArr.map((item)=>{
                      return (

                        <div className={styles.courseShow}  key={item.courseId}>
                          {/*<div className={styles.courseFlex_content}>*/}

                          <img className={styles.courseImg} src={item.courseImgName} alt="课程图"/>

                          <div className={styles.coursetext}>{item.courseName}</div>
                          <div className={styles.courseText}>
                            <img className={styles.avateIcon} src={logoImg} alt="logo"/>
                            <div className={styles.keyTeacher}>{item.keyTeacher}</div>
                          </div>
                          <div className={styles.cashNumContent}>
                            <text className={styles.cashNum}>￥{item.discountPrice}/{item.discountYcoin}贝</text>
                            <text className={styles.learnNum}>{item.salesNum} <text className={styles.learnNumText}>人在学</text> </text>
                          </div>
                          {/*</div>*/}

                        </div>
                      )
                    })
                  }
                </div>
              </div>




            </Spin>

          </div>


          <div className={styles.bottomPage} >
            <img className={styles.pageRightReverse} src={pageRight} alt=""/>
          {
            this.state.pageTextList.map((item)=>{
              return (
                <div className={styles.pageTextDiv} key={item.pageId} onClick={()=>{
                  this.setState({clickPageId:item.pageId})
                }}>
                    <text className={this.state.clickPageId == item.pageId?styles.pageTextCli : styles.pageText}>{item.pageText}</text>
                </div>
              )
            })
          }
            <img className={styles.pageRight} src={pageRight} alt=""/>
          </div>



        </div>




      </div>
    )
  }













}
export default MoreIndex;
